<template>
  <div class="app-container">
    <div class="titleInfo">
      <el-image :src="deliveryDetailData.detail.personalImagePhoto" style="width: 100px; vertical-align: middle" fit="fill" />
      <div class="carinfo">
        <p>姓名:{{ deliveryDetailData.detail.fullName }}</p>
        <p>
          电话:{{ deliveryDetailData.detail.phonenumber
          }}<el-button link type="primary" v-copy="deliveryDetailData.detail.phonenumber" :icon="DocumentCopy"></el-button>
        </p>
      </div>

      <div v-if="btnStatus" style="float: right; margin-top: 25px">
        <el-button type="danger" size="default" round @click="handleCancelAccount">注销账号</el-button>
      </div>
    </div>
    <div class="baicInfo">
      <div>
        <h2 v-if="!btnStatus" style="margin-bottom: 20px; font-size: 20px; color: red; text-align: center">
          还不能注销账号请完成以下内容才可以注销账号
        </h2>
        <h2 v-else style="margin-bottom: 20px; font-size: 20px; color: green; text-align: center">可以注销账号</h2>
      </div>
      <div>
        <div>未退还车辆信息<span>（请先联系站长退还车辆方可注销账号）</span></div>
        <div>
          <el-table
            stripe
            border
            :cell-style="{ textAlign: 'center', fontSize: '12px' }"
            :header-cell-style="{
              textAlign: 'center',
              fontWeight: '100',
              fontSize: '13px',
              color: 'white',
              backgroundColor: '#009688'
            }"
            style="width: 100%"
            :data="unreturnedVehicle"
          >
            <el-table-column label="车辆类型" prop="vehicleTypeName" />
            <el-table-column label="车辆编号/车牌号" prop="vehicleCode">
              <template #default="scope">
                {{ scope.row.vehicleCode + "/" + scope.row.vehicleNumber }}
              </template>
            </el-table-column>
            <el-table-column label="车辆图片" prop="vehicleTypeFrontalView">
              <template #default="scope">
                <el-image :src="scope.row.vehicleTypeFrontalView" style="width: 100px; vertical-align: middle" fit="fill" />
              </template>
            </el-table-column>
            <el-table-column label="所需驾驶证类型" prop="driverLicenseTypeName" />
            <el-table-column label="车辆押金" prop="vehicleDeposit">
              <template #default="scope">
                <el-select @change="upDeposit" v-model="scope.row.vehicleDeposit" placeholder="请选择">
                  <el-option value="500" label="500元"></el-option>
                  <el-option value="1000" label="1000元"></el-option>
                  <el-option value="1500" label="1500元"></el-option>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column label="车辆使用费" prop="vehicleUsageFee">
              <template #default="scope">
                <el-select @change="upCost" v-model="scope.row.vehicleUsageFee" placeholder="请选择">
                  <el-option value="5" label="5元/天"></el-option>
                  <el-option value="10" label="10元/天"></el-option>
                  <el-option value="15" label="15元/天"></el-option>
                </el-select>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div>配送中的订单信息<span>（请先完成一下订单信息方可注销账号）</span></div>
        <div>
          <el-table
            stripe
            border
            :cell-style="{ textAlign: 'center', fontSize: '12px' }"
            :header-cell-style="{
              textAlign: 'center',
              fontWeight: '100',
              fontSize: '13px',
              color: 'white',
              backgroundColor: '#009688'
            }"
            style="width: 100%"
            :data="orderInTransit"
          >
            <el-table-column label="订单编号" prop="orderId" />
            <el-table-column label="所属驿站" prop="stageId" />
            <el-table-column label="送货小区" prop="neighborhoodId" />
            <el-table-column label="预计送达时间" prop="deliveryEndTime" />
          </el-table>
        </div>
        <div>账户金额信息<span>(请先体现账户余额方可注销账号)</span></div>
        <div>
          <el-table
            stripe
            border
            :cell-style="{ textAlign: 'center', fontSize: '12px' }"
            :header-cell-style="{
              textAlign: 'center',
              fontWeight: '100',
              fontSize: '13px',
              color: 'white',
              backgroundColor: '#009688'
            }"
            style="width: 100%"
            :data="account"
          >
            <el-table-column label="姓名" prop="withdrawalName" />
            <el-table-column label="账号" prop="withdrawalAccount" />
            <el-table-column label="余额" prop="balance" />
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="tsx" setup name="examineDetail">
import { Delivery } from "@/api/interface/city/organizationManage";
import { cancelAccountAPI, getDeliveryDetailAPI, getUnpaidInfoAPI } from "@/api/modules/city/organizationAPI";
import { DocumentCopy } from "@element-plus/icons-vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { onMounted, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
const router = useRouter();
const route = useRoute();
let btnStatus = ref<boolean>(false);
const deliveryDetailData = ref<Delivery.DetailData>({
  detail: {
    userId: 1,
    fullName: "string",
    userName: "string",
    age: -2147483648,
    sex: "string",
    birthday: "2019-08-24T14:15:22.123Z",
    idCardNo: "string",
    phonenumber: "string",
    status: "0",
    reason: "string",
    auditStatus: "0",
    delFlag: "0",
    idCardAuditStatus: "0",
    idCardValidityStatus: "s",
    idCardValidityStartTime: "2019-08-24T14:15:22.123Z",
    idCardValidityEndTime: "2019-08-24T14:15:22.123Z",
    entryDate: "2019-08-24",
    leaveDate: "2019-08-24",
    idCardHeadPhoto: "string",
    idCardBackPhoto: "string",
    personalImagePhoto: "string",
    subsidyAmountStatus: -2147483648,
    workingStatus: -2147483648,
    stageName: "string",
    secondStageList: [
      {
        stageId: "string",
        stageName: "string"
      }
    ]
  },
  healthCertificate: {
    id: 1,
    validStartTime: "2019-08-24T14:15:22.123Z",
    validEndTime: "2019-08-24T14:15:22.123Z",
    status: 1,
    healthCertificateUrl: "string"
  },
  driverLicense: [
    {
      id: 1,
      drivingLicenseTypeName: "string",
      drivingLicensePhoto: "string",
      drivingLicenseNo: "string",
      drivingLicenseYears: "string",
      actualDrivingYears: "string",
      drivingLicenseValidityStartTime: "2019-08-24T14:15:22.123Z",
      drivingLicenseValidityEndTime: "2019-08-24T14:15:22.123Z",
      status: 1
    }
  ],
  vehicle: {
    id: 1,
    vehicleTypeName: "string",
    vehicleCode: "string",
    vehicleNumber: "string",
    vchicleDepositId: -2147483648,
    vehicleDeposit: 0,
    vehicleUsageFee: 0,
    vehicleUsageFeeId: -2147483648,
    vehicleTypeFrontalView: "string",
    vehicleTypeBackView: "string",
    vehicleTypeLeftView: "string",
    vehicleTypeRightView: "string",
    driverLicenseTypeName: "string"
  }
});
const switchStatus = ref<boolean>(false);

const detailData = ref<Delivery.Detail[]>([]);
const healthCertificateData = ref<Delivery.HealthCertificate[]>([]);
const vehicle = ref<Delivery.Vehicle[]>([]);
const examineDepositParams = ref<Delivery.ExamineDepositParams>({});
const handleCancelAccount = () => {
  ElMessageBox.confirm("确认取消该账号吗？", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning"
  })
    .then(() => {
      cancelAccount();
    })
    .catch(() => {
      console.log("取消操作");
    });
};
const upDeposit = () => {
  examineDepositParams.value.type = "1";
};
const upCost = () => {
  examineDepositParams.value.type = "2";
};
const getDeliveryDetailData = async (userId: number) => {
  const { code, data, msg } = await getDeliveryDetailAPI(userId);
  if (code == "200" && data) {
    if (data.detail.subsidyAmountStatus == 1) {
      switchStatus.value = true;
    } else {
      switchStatus.value = false;
    }
    deliveryDetailData.value = data;
    if (data.detail) {
      detailData.value.push(data.detail);
    }
    if (data.healthCertificate) {
      healthCertificateData.value.push(data.healthCertificate);
    }
    if (data.detail.vehicle) {
      vehicle.value = data.detail.vehicle;
    }
  } else {
    ElMessage.error(msg);
  }
};

const unreturnedVehicle = ref<Delivery.UnreturnedVehicle[]>([]);
const orderInTransit = ref<Delivery.OrderInTransit[]>([]);
const account = ref<Delivery.Account[]>([]);
const getUnpaidInfo = async () => {
  const { code, data, msg } = await getUnpaidInfoAPI({ userId: Number(route.query.id) });
  if (code == "200" && data) {
    console.log(data);
    if (data.unreturnedVehicle) {
      unreturnedVehicle.value.push(data.unreturnedVehicle);
    }
    if (data.orderInTransit) {
      orderInTransit.value = data.orderInTransit;
    }
    if (data.account) account.value.push(data.account);
    if (
      data.unreturnedVehicle?.vehicleCode &&
      (data.orderInTransit as Delivery.OrderInTransit[]).length > 0 &&
      data.account?.balance
    ) {
      btnStatus.value = false;
    } else {
      btnStatus.value = true;
    }
  } else {
    ElMessage.error(msg);
  }
};
const cancelAccount = async () => {
  const { code, msg } = await cancelAccountAPI({ userId: Number(route.query.id) });
  if (code == "200") {
    ElMessage.success("注销成功");
    router.push({ path: "/cityLevel/cityOrganization/cityStationer/cancel" });
  } else {
    ElMessage.error(msg);
  }
};
onMounted(() => {
  getDeliveryDetailData(Number(route.query.id));
  getUnpaidInfo();
});
</script>

<style lang="scss" scoped>
body {
  .app-container {
    padding: 15px;
    background-color: white;
  }

  font-size: 13px;
  .titleInfo {
    margin-bottom: 10px;
    span {
      margin-right: 70px;
      font-size: 13px;
      color: gray;
    }
    .carinfo {
      display: inline-block;
      padding: 0;
      margin-right: 11.59%;
      margin-left: 15px;
      font-size: 13px;
      color: gray;
      vertical-align: middle;
      p {
        // padding: 10px 0;
        height: 40px;
        margin: 0;
        line-height: 40px;
        vertical-align: middle;
        .el-button {
          margin-left: 5px;
        }
        .el-switch {
          padding: 0;
          margin-left: 5px;
        }
      }
    }
    .carstatus {
      display: inline-block;
      float: right;
      margin-right: -135px;
      font-size: 13px;
      color: gray;
      vertical-align: middle;
    }
  }
  .baicInfo {
    padding: 10px;
    font-size: 13px;
    color: gray;
    border: 1px solid #e6e6e6;
    div {
      margin-top: 12px;
    }
    .device {
      padding: 20px 10px;
      border: 1px solid #e6e6e6;
      span {
        margin-right: 60px;
      }
    }
  }
  .btn-container {
    text-align: right;
  }
}
::v-deep .el-input--suffix .el-input__inner {
  padding-right: 15px;
}
::v-deep .el-form-item__label {
  font-size: 13px;
  font-weight: 100;
  color: black;
}
::v-deep .el-button > span {
  font-size: 13px;
}
::v-deep .el-input__inner {
  font-size: 13px;
}
</style>
